<template>
  <div class="app-main">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-form-model-item label="访谈分类">
            <a-input v-model="pageFilter.name" :allowClear=true placeholder="请输入" />
          </a-form-model-item>
          <div class="btnBox">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button type="primary" @click="onQuery"> 查询 </a-button>
              <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <div>
          <a-button type="primary" @click="onAdd(1)">新增访谈分类</a-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="key" :showAlert="false" :expandIconColumnIndex="1" :showSelection="false"
          :loading="loading" :columns="columns" :dataSource="pageData" @change="onTableChange">
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <template v-if="record.extendData.split(',').length < 2">
              <a-button @click="onAdd(2, record)" type="link" style="padding: 0">新增</a-button>
              <a-divider type="vertical" />
            </template>
            <a-button @click="onAdd(3, record)" type="link" style="padding: 0">编辑</a-button>
            <a-divider type="vertical" />
            <a-button @click="onDelete(record)" type="link" style="padding: 0">删除</a-button>
          </template>
        </z-table>
      </div>
      <TypeModal ref="typeModalId" :title=title @ok="onQuery" />
    </a-card>
  </div>
</template>

<script>
import * as interviewApi from '@/api/sjsk/help/interview.js'
import TypeModal from './modules/TypeModal'
export default {
  components: {
    TypeModal
  },
  data() {
    return {
      labelCol: { span: 2 },
      wrapperCol: { span: 5 },
      loading: false,
      visible: false,
      reloading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
            if (record.isOrder) { //第一层级才显示序号
              return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
            }
          }
        },
        {
          title: '访谈分类',
          dataIndex: 'title',
        },
        {
          title: '创建人',
          dataIndex: 'createName',
          width: '12%',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: '30%',
        },
        {
          title: '操作',
          width: 250,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageData: {
        // records: [
        //   {
        //     id: 1,
        //     name: '收集资料',
        //     age: 60,
        //     address: 'New York No. 1 Lake Park',
        //     children: [
        //       {
        //         id: 11,
        //         name: '建立档案',
        //         age: 42,
        //         address: 'New York No. 2 Lake Park',
        //       },
        //       {
        //         id: 12,
        //         name: '就业安置',
        //         age: 30,
        //         address: 'New York No. 3 Lake Park',
        //         children: [
        //           {
        //             id: 121,
        //             name: 'Jimmy Brown',
        //             age: 16,
        //             address: 'New York No. 3 Lake Park',
        //           },
        //         ],
        //       },
        //       {
        //         id: 13,
        //         name: 'Jim Green sr.',
        //         age: 72,
        //         address: 'London No. 1 Lake Park',
        //         children: [
        //           {
        //             id: 131,
        //             name: 'Jim Green',
        //             age: 42,
        //             address: 'London No. 2 Lake Park',
        //             children: [
        //               {
        //                 id: 1311,
        //                 name: 'Jim Green jr.',
        //                 age: 25,
        //                 address: 'London No. 3 Lake Park',
        //               },
        //               {
        //                 id: 1312,
        //                 name: 'Jimmy Green sr.',
        //                 age: 18,
        //                 address: 'London No. 4 Lake Park',
        //               },
        //             ],
        //           },
        //         ],
        //       },
        //     ],
        //   },
        //   {
        //     id: 2,
        //     name: '评估问题或需求',
        //     age: 32,
        //     address: 'Sidney No. 1 Lake Park',
        //   }]
      },
      title: ""
    }
  },
  created() {

  },
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      interviewApi.classificationTree(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
          //第一层级添加标识符，用于显示序号
          this.pageData.forEach(item => {
            item.isOrder = true
            this.setChildren(item)
          })
        } else {
          this.$message.success(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warning(res.message)
        })
    },
    //遍历树，把children数组为空的，删掉children，即不显示前面的+号（还没有实现）
    setChildren(node) {
      if (node.children && node.children.length <= 0) {
        delete node.children
        // console.log("111111111111")
        // console.log(node)
        // this.setChildren(node)
      } else {
        // console.log("222222222222")
        for (let i = 0; i < node.children.length; i++) {
          // console.log(node.children[i])
          this.setChildren(node.children[i])
        }
      }



    },
    onAdd(type, record) {
      if (type == 3) {
        this.title = "编辑分类"
      } else {
        this.title = "添加分类"
      }
      this.$refs.typeModalId.show(type, record)
    },
    onDelete(record) {
      let that = this;
      this.$confirm({
        title: `你确定要删除此访谈分类吗？`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          interviewApi.deleteClassification({ id: record.key }).then((res) => {
            that.$message.success(res.message)
            that.onQuery();
          });
        }
      });
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.btnBox {
  position: absolute;
  left: 30%;
  top: 0;
  z-index: 120;
}

/deep/.ant-card-body {
  padding: 15px 24px;
}

/deep/.ant-row {
  margin-bottom: 0
}

/deep/.ant-col-2 {
  width: 5.8% !important;
}
</style>
